<template>
  <div class="seckill-manage">
    <!-- 搜索和操作栏 -->
    <el-card class="search-box">
      <el-form :inline="true">
        <el-form-item label="是否显示">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option label="全部" value="" />
            <el-option label="已开启" value="1" />
            <el-option label="已关闭" value="0" />
          </el-select>
        </el-form-item>

        <el-form-item label="秒杀名称">
          <el-input
              v-model="queryParams.name"
              placeholder="请输入秒杀名称"
              clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              @click="handleSearch"
          >搜索</el-button>
          <el-button
              type="success"
              @click="handleAdd"
          >添加秒杀配置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-box">
      <el-table
          :data="tableData"
          stripe
          style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="秒杀名称" min-width="150" />
        <el-table-column label="秒杀时段" min-width="180">
          <template #default="{row}">
            {{ row.startTime }} - {{ row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="image" label="拍摄图" width="120">
          <template #default="{row}">
            <el-image
                :src="row.image"
                style="width: 80px; height: 60px"
                fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{row}">
            <el-tag
                :type="row.status ? 'success' : 'danger'"
                effect="dark"
            >
              {{ row.status ? '开启' : '关闭' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="240">
          <template #default="{row}">
            <el-button
                type="primary"
                size="small"
                @click="handleEdit(row)"
            >编辑</el-button>
            <el-button
                type="danger"
                size="small"
                @click="handleDelete(row)"
            >删除</el-button>
            <el-button
                type="warning"
                size="small"
                @click="handleAddGoods(row)"
            >添加商品</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :total="pagination.total"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            background
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import axios  from "axios";

//
// let spikes = ref([])
//
// const spikesList = () => {
//
//   axios.
// }

// 模拟数据
const tableData = ref([
  {
    id: 6,
    name: 'wwwww',
    startTime: '09:00',
    endTime: '20:00',
    image: 'https://images.unsplash.com/photo-1519167758481-83f550bb49b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80',
    status: 1,
    createTime: '2021-01-06 14:25:54'
  },
  // 其他数据...
])

const queryParams = reactive({
  status: '',
  name: ''
})

const pagination = reactive({
  current: 1,
  size: 20,
  total: 3
})

const handleSearch = () => {
  console.log('Search params:', queryParams)
}

const handleAdd = () => {
  console.log('Add new seckill')
}

const handleEdit = (row) => {
  console.log('Edit:', row)
}

const handleDelete = (row) => {
  console.log('Delete:', row)
}

const handleAddGoods = (row) => {
  console.log('Add goods to:', row)
}
</script>

<style scoped>
.seckill-manage {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.search-box {
  margin-bottom: 20px;
}

.table-box {
  border-radius: 8px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-form--inline .el-form-item {
  margin-right: 30px;
}

.el-image {
  border-radius: 4px;
}

.el-button + .el-button {
  margin-left: 8px;
}
</style>